widgets.brease.TabItem

Widget Description

short: Tab plus content in a TabController
de: Konfiguriert einen Tab im TabController
en: Configures one tab in a TabController

Properties

name description category type defaultValue bindable readOnly required localizable editableBinding projectable cssProp (has no setter and getter in JS) groupRefId groupOrder nodeRefId (for linking node and value) deprecated typeRefId (for StyleReference) subtype (for MpComIdentReference)
ellipsis If true, overflow of text is symbolized with an ellipsis. This option has no effect, if wordWrap = true. Behavior Boolean false false false false false false true
enable Initial option to enable widget. Behavior Boolean true true false false false false true
image Path to an optional image. When svg - graphics are used, be sure that in your *.svg-file height and width attributes are specified on the svg-element. For more detailed information see https://www.w3.org/TR/SVG/struct.html (chapter 5.1.2) Appearance ImagePath true false false false false true
imageAlign Position of image relative to text. Appearance brease.enum.ImageAlign left false false false false false true
mouseDownImage Path to an optional image for mouseDown. When svg - graphics are used, be sure that in your *.svg-file height and width attributes are specified on the svg-element. For more detailed information see https://www.w3.org/TR/SVG/struct.html (chapter 5.1.2) Appearance ImagePath false false false false false true
multiLine If true, more than one line is possible. Text will wrap when necessary (wordWrap=true) or at line breaks (\n). If false, text will never wrap to the next line. The text continues on the same line. Behavior Boolean false false false false false false true
permissionOperate restricts operability to users, which have given roles Accessibility RoleCollection no defaultValue
defined		 false false false false false true
permissionView restricts visibility to users, which have given roles Accessibility RoleCollection no defaultValue
defined		 false false false false false true
style reference to a style for this widget type Appearance StyleReference default true false false false false true
tabIndex sets if a widget should have autofocus enabled (0), the order of the focus (>0), or if autofocus should be disabled (-1) Behavior Integer -1 false false false false false true
text Text which is displayed in the button Appearance String true false false true false true
tooltip reference to a tooltip for a widget Appearance String false false false true false true
useSVGStyling Define if the image stylings (i.e imageColor) are applied - only valid when SVG Images are used. Appearance Boolean true false false false false false true
visible change visibility Behavior Boolean true true false false false false true
wordWrap If true, text will wrap when necessary. Behavior Boolean false false false false false false true
imageHeight height of the image ImageSize 0 false false false true true
imageWidth width of the image ImageSize 0 false false false true true
zIndex The zIndex property specifies the z-order of a widget and its childs.
When widgets overlap, z-order determines which one covers the other. A widget with a larger zIndex generally covers a widget with a lower one.
The zIndex must be unique within a content.
 UInteger no defaultValue
defined		 false false true true true
left Applies an offset to the TabItem relative to its "nominal" position. For instance, if a space of 10px is desired between each TabItem within a TabControl, the following should be configured: First TabItem: left="0px" / Second TabItem: left="10px" / Third TabItem: left="20px" / ... Integer no defaultValue
defined		 false false false true true
height outer height of widget Size 30 false false false true true
width outer width of widget Size 100 false false false true true

Styleable Properties

name type description defaultValue
imageColor Color

Color of the image - only apply if a SVG image is used

 #000000
mouseDownImageColor Color

Color of the image - only apply if a SVG image is used

 #000000
borderStyle BorderStyle

Sets the border style of the tab. For further information, please see its type

 solid
borderWidth PixelValCollection

Sets the border width of the tab. For further information, please see its type

 2px
cornerRadius PixelValCollection

Sets the radius of the tab rounded corners. For further information, please see its type

 5px 5px 0px 0px
borderColor ColorCollection

Sets the border color of the tab

 #5B7C70
backColor Color

Sets the background color of the tab

 #DBDBDB
backGroundGradient Gradient

Sets the background color of the tab as gradient. For further information, please see CSS Gradients
textColor Color

Sets the color of the text displayed on the tab

 #000000
activeBorderStyle BorderStyle

Sets the border style of the tab when it is selected. For further information, please see its type

 solid
activeBorderWidth PixelValCollection

Sets the border width of the tab when it is selected. For further information, please see its type

 4px 2px 0px 2px
activeCornerRadius PixelValCollection

Sets the radius of rounded corners of the tab when selected. For further information, please see its type

 0px
activeBorderColor ColorCollection

Sets the border color of the tab when it is selected

 #FD7B01 #5B7C70 #5B7C70 #5B7C70
activeBackColor Color

Sets the background color of the tab when selected

 #FFFFFF
activeBackGroundGradient Gradient

Sets the background color of the selected tab as gradients. For further information, please see CSS Gradients
activeTextColor Color

Sets the text color of the tab when selected

 #000000
textAlign brease.enum.TextAlign

Sets the text alignment of the tab

 center
opacity Opacity

Sets the opacity of the tab

 1
fontSize PixelVal

Sets the font size of the text displayed on the tab

 12px
fontName FontName

Sets the font name of the text displayed on the tab

 Arial
bold Boolean

If true, it sets the font style of the text displayed on the tab to bold

 true
italic Boolean

If true, it sets the font style of the text displayed on the tab to italic

 false
margin Margin

Sets a space around the tab. For further information, please see its type

 0px
padding Padding

Sets a space around the text displayed on the tab. For further information, please see its type

 0px 10px

Events

name description arguments
Click Fired when element is clicked on.
  • origin: String

    id of widget that triggered this event

  • horizontalPos: String

    horizontal position of click in pixel i.e '10px'

  • verticalPos: String

    vertical position of click in pixel i.e '10px'

DisabledClick Fired when disabled element is clicked on.
  • origin: String

    id of widget that triggered this event

  • hasPermission: Boolean

    defines if the state is caused due to missing roles of the current user

  • horizontalPos: String

    horizontal position of click in pixel i.e '10px'

  • verticalPos: String

    vertical position of click in pixel i.e '10px'

EnableChanged Fired when operability of the widget changes.
  • value: Boolean

    operability

FocusIn Fired when the widgets gets focus
FocusOut Fired when the widgets lost focus
OnDragEnter Fired when element has onDragEnter.
  • contentId: String

    content id of the widget that has been entering the droppable widget

  • widgetId: String

    id of the widget that has been entering the droppable widget

OnDragLeave Fired when element has OnDragLeave.
  • contentId: String

    content id of the widget that has been leaving the droppable widget

  • widgetId: String

    id of the widget that has been leaving the droppable widget

OnDrop Fired when element has OnDrop.
  • contentId: String

    content id of the widget that has been dropped on the droppable widget

  • widgetId: String

    id of the widget that has been dropped on the droppable widget

VisibleChanged Fired when the visibility of the widget changes.
  • value: Boolean

    visibility

Actions

name description arguments result
Focus Sets focus on the widget element, if it can be focused and keyboardOperation=true
RemoveImage Remove an image.
RemoveText Remove text.
SetEnable Sets the state of property «enable»
  • value: Boolean

SetImage Sets an image.
  • image: ImagePath

SetStyle
  • value: StyleReference

SetText Sets the visible text. This method can remove an optional textkey.
  • text: String

  • keepKey: Boolean

    Set true, if textkey should not be removed.

SetVisible Sets the state of property «visible»
  • value: Boolean

ShowTooltip